<template>
  <div @click="filterChangeRef.gradeAndClassOpen = false">
    <div class="top">
      <Form
        ref="formRef"
        name="advanced_search"
        class="ant-advanced-search-form"
        :model="formState"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <Row :gutter="[16, 1]">
          <Col :span="6">
            <Form.Item label="年级/班级">
              <FilterChange ref="filterChangeRef" />
            </Form.Item>
          </Col>

          <Col :span="6">
            <Form.Item label="分配状态">
              <a-select
                ref="select"
                v-model:value="formState.allocationStatus"
                placeholder="请选择"
                allow-clear
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode;
                  }
                "
              >
                <!-- <a-select-option value="">全部</a-select-option> -->
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="1">已分配</a-select-option>
                <a-select-option value="0">未分配</a-select-option>
              </a-select>
            </Form.Item>
          </Col>
          <Col :span="6">
            <div class="search">
              <div class="search-btn">
                <a-button type="primary" class="z-btn-32" @click="query('hand')">查询</a-button>
                <a-button
                  type="primary"
                  class="z-btn-32"
                  style="margin: 0 0 0 16px"
                  ghost
                  @click="reset"
                  >重置</a-button
                >
              </div>
            </div>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="below">
      <div v-if="stateUser.identity === 8" class="search">
        <div class="search-btn-left">
          <!-- <a-button
            type="primary"
            :disabled="!hasSelected"
            style="margin-right: 16px"
            @click="onDormitoryAllocation()"
            >宿舍分配</a-button
          > -->
          <a-button
            type="primary"
            style="margin-right: 16px"
            :disabled="!hasCheckOut"
            @click="onCheckOut"
            >退宿</a-button
          >
        </div>
      </div>
      <!-- 表格 -->
      <div>
        <!-- :data-source="tableClassData.records" -->
        <a-table
          style="margin-top: 16px"
          :row-selection="
            stateUser.identity !== 8 && stateUser.classInfoList !== []
              ? undefined
              : { selectedRowKeys: selectedRowKeys, onChange: onSelectChange }
          "
          :columns="columnsClass"
          :data-source="tableClassData.records"
          :row-key="record => record.classId"
          :pagination="false"
          :loading="loading"
          :scroll="{ x: 1300 }"
        >
          <!-- <template v-slot:emptyText>{{ loading ? '' : '暂无数据' }}</template> -->
          <template v-slot:emptyText>
            <div class="zz-global-nodata">
              <img
                v-if="searchStatus * 1 === 0"
                src="@/assets/images/accommodation/default-no-data.png"
                alt=""
              />
              <img v-else src="@/assets/images/accommodation/no-data-search-new.png" alt="" />
            </div>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'dormitoryNames'">
              <Tooltip
                :overlay-style="{ whiteSpace: 'normal' }"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode || document.body;
                  }
                "
                placement="topLeft"
                :title="record.dormitoryNames"
              >
                <p
                  style="
                    width: 108px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                  >{{ record.dormitoryNames ? record.dormitoryNames : '--' }}</p
                >
              </Tooltip>
            </template>
            <template v-if="column.dataIndex === 'unAllocationNum'">
              <!-- <span>{{
                record.unAllocationNum === 0
                  ? '已分配'
                  : record.unAllocationNum > 0
                  ? '未分配'
                  : '--'
              }}</span> -->

              <!-- <span v-if="record.unAllocationNum === 0" class="z-gray-color">已分配</span>
              <span v-if="record.unAllocationNum > 0" class="z-red-color">未分配</span>
              <span v-if="record.unAllocationNum < 0">--</span> -->
              <span v-if="record.unAllocationNum > 0" class="z-gray-color">已分配</span>
              <span v-if="record.unAllocationNum < 1 || !record.unAllocationNum" class="z-red-color"
                >未分配</span
              >
            </template>
            <template v-if="column.dataIndex === 'roomNum'">
              <span>{{ record.roomNum ? record.roomNum : '--' }}</span>
            </template>
            <template v-if="column.dataIndex === 'stayNum'">
              <span>{{ record.stayNum ? record.stayNum : '--' }}</span>
            </template>
            <template v-if="column.dataIndex === 'externNum'">
              <span>{{ record.externNum ? record.externNum : '0' }}</span>
            </template>
            <template v-if="column.dataIndex === 'leaveNum'">
              <span>{{ record.leaveNum ? record.leaveNum : '0' }}</span>
            </template>
            <template v-if="column.dataIndex === 'action'">
              <a-button
                type="primary"
                size="small"
                ghost
                class="z-btn-24"
                @click="onClassDeta(record)"
                >查看</a-button
              >
            </template>
          </template>
        </a-table>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <span style="color: #999999; margin-right: 8px">共{{ tableClassData.pages }}页</span>
        <a-pagination
          v-model:current="tableClassData.current"
          v-model:pageSize="tableClassData.size"
          show-quick-jumper
          :page-size-options="pageSizeOptions"
          :total="tableClassData.total"
          :show-size-changer="true"
          @change="onChangePagination"
        />
      </div>
    </div>
    <!-- 退宿 提示框 -->
    <my-dialog
      :dialog-state="checkOut.visible"
      :dialog-title="checkOut.title"
      :dialog-width="checkOut.width"
      :icon-type="checkOut.iconType"
      :btn-loading="btnLoading"
      @handleCancel="handleCancel"
      @handleOk="checkOuts"
    >
      <template v-slot:location>
        <div class="checkOutStyle">
          <img src="@/assets/images/accommodation/drawable-xxxhdpi_popu_icon_warn.png" alt="" />
          <span>{{ text }}</span>
        </div>
        <p v-if="show" class="checkOut-notes"
          >注：此动作将会清除已选内容所有住宿信息，请谨慎操作。</p
        >
      </template>
    </my-dialog>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref, computed, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { Form, Row, Col, message, Tooltip } from 'ant-design-vue';
import { getClass, batchCheckout } from '@/api/classManage';
import { gradeList, classList } from '@/api/common';
import MyDialog from '@/components/dialog/index.vue';
import { useStore } from 'vuex';
import FilterChange from '@/components/filterChange/index.vue';
import { debounce } from '@/utils/debounce.js';
const localStorageSchoolId = localStorage.getItem('localStorageSchoolId');
const schoolBaseId = ref(0);
const formState = ref({
  grade: undefined, // 年级
  infoClass: undefined, // 班级
  allocationStatus: undefined // 分配状态
});
let tableClassData = ref({
  current: 1, // 当前页
  optimizeCountSql: true, // 是否有上一页
  orders: [], // 排序
  pages: 0, // 总页数
  records: [], // 数据
  searchCount: true, // 是否有下一页
  size: 10, // 当前条数
  total: 0 // 总条数
});
onMounted(() => {
  // getGradeList();
  if (
    localStorageSchoolId === '346001568933441537' ||
    localStorageSchoolId === '221954838718582784'
  ) {
    schoolBaseId.value = 1;
  } else {
    schoolBaseId.value = 0;
  }
  getClassInfo();
});
onUnmounted(() => {
  console.log('走销毁了，班级信息管理');
  // localStorage.removeItem('dormitoryClassInfoQuery');
});

const store = useStore();
const stateUser = computed(() => store.state.user.STATE_USER);
// const classInfoListLength = computed(() => stateUser.value.classInfoList.length);
// watch(classInfoListLength, () => {
//   getGradeList();
// });

// const stateUser = ref(JSON.parse(localStorage.getItem('STATE_USER')));

// 下拉选项列表
const optionList = ref({
  gradeList: [],
  classList: []
});

function obtainQuery() {
  let dormitoryClassInfoQuery = localStorage.getItem('dormitoryClassInfoQuery');
  console.log('我cnim', dormitoryClassInfoQuery);
  if (dormitoryClassInfoQuery && dormitoryClassInfoQuery !== null) {
    let dormitoryClassInfoQueryJson = JSON.parse(dormitoryClassInfoQuery);
    tableClassData.value.size = dormitoryClassInfoQueryJson.size;
    tableClassData.value.current = dormitoryClassInfoQueryJson.current;
    formState.value.grade = dormitoryClassInfoQueryJson.grade;

    formState.value.allocationStatus = dormitoryClassInfoQueryJson.allocationStatus;
    console.log('大脑思考的数据库', dormitoryClassInfoQueryJson.grade);
    if (
      dormitoryClassInfoQueryJson.grade &&
      dormitoryClassInfoQueryJson.grade !== null &&
      dormitoryClassInfoQueryJson.infoClass &&
      dormitoryClassInfoQueryJson.infoClass !== null
    ) {
      classList({ gradeId: dormitoryClassInfoQueryJson.grade }).then(res => {
        if (res.data.code === 200) {
          if (stateUser.value.identity !== 8) {
            let arr = stateUser.value.classInfoList.filter(
              v => v.gradeId === formState.value.grade
            )[0].classIdList;
            let list = [];
            res.data.data.forEach(v => {
              if (arr.indexOf(v.id) !== -1) list.push(v);
            });
            res.data.data = list;
          }
          optionList.value.classList = res.data.data;
          formState.value.infoClass = dormitoryClassInfoQueryJson.infoClass;
          getClassInfo();
        }
      });
    } else {
      if (dormitoryClassInfoQueryJson.grade && dormitoryClassInfoQueryJson.grade !== null) {
        console.log('wcnmlgbbbbbb');
        classList({ gradeId: dormitoryClassInfoQueryJson.grade }).then(res => {
          console.log('wcnmlgbbbbbb', res);
          if (res.data.code === 200) {
            // if (stateUser.value.identity !== 8) {

            optionList.value.classList = res.data.data;
            console.log('ssss', optionList.value.classList);
            // }
          }
        });
      }
      getClassInfo();
    }
    // formState.value.infoClass = dormitoryClassInfoQueryJson.infoClass;
  }
}
const loading = ref(true);
// 获取年级列表
const getGradeList = () => {
  let dormitoryClassInfoQuery = localStorage.getItem('dormitoryClassInfoQuery');
  gradeList().then(async res => {
    if (res.data.code === 200) {
      if (stateUser.value.identity !== 8) {
        let arr = stateUser.value.classInfoList.map(v => v.gradeId);
        let list = [];
        res.data.data.forEach(v => {
          if (arr.indexOf(v.gradeId) !== -1) list.push(v);
        });
        res.data.data = list;
      }
      optionList.value.gradeList = res.data.data;
      if (stateUser.value.identity !== 8) {
        if (
          localStorageSchoolId === '346001568933441537' ||
          localStorageSchoolId === '221954838718582784'
        ) {
          formState.value.grade = null;
        } else {
          formState.value.grade = optionList.value.gradeList.length
            ? optionList.value.gradeList[0].gradeId
            : null;
        }

        optionList.value.classList = [];

        if (!dormitoryClassInfoQuery && dormitoryClassInfoQuery === null) {
          await classList({ gradeId: formState.value.grade }).then(res => {
            if (res.data.code === 200) {
              // if (stateUser.value.identity !== 8) {
              let arr = stateUser.value.classInfoList.filter(
                v => v.gradeId === formState.value.grade
              )[0].classIdList;
              let list = [];
              res.data.data.forEach(v => {
                if (arr.indexOf(v.id) !== -1) list.push(v);
              });
              res.data.data = list;
              // }
              optionList.value.classList = res.data.data;

              if (
                localStorageSchoolId === '346001568933441537' ||
                localStorageSchoolId === '221954838718582784'
              ) {
                formState.value.infoClass = null;
              } else {
                formState.value.infoClass = optionList.value.classList.length
                  ? optionList.value.classList[0].id
                  : null;
              }
            }
          });
        }
      }
      obtainQuery();
      if (!dormitoryClassInfoQuery && dormitoryClassInfoQuery === null) {
        getClassInfo();
      }
    }
  });
};
// 选择年级改变回调
const onChangeGrade = value => {
  formState.value.infoClass = null;
  optionList.value.classList = [];
  classList({ gradeId: value }).then(res => {
    if (res.data.code === 200) {
      if (stateUser.value.identity !== 8) {
        let arr = stateUser.value.classInfoList.filter(v => v.gradeId === formState.value.grade)[0]
          .classIdList;
        let list = [];
        res.data.data.forEach(v => {
          if (arr.indexOf(v.id) !== -1) list.push(v);
        });
        res.data.data = list;
      }
      optionList.value.classList = res.data.data;

      formState.value.infoClass = optionList.value.classList.length
        ? optionList.value.classList[0].id
        : null;
      // query('hand');
    }
  });
};
const router = useRouter();

const columnsClass = reactive([
  {
    key: 'className',
    title: '学段/年级/班级',
    dataIndex: 'className',
    scopedSlots: { customRender: 'className' },
    fixed: 'left'
  },
  {
    key: 'dormitoryNames',
    title: '宿舍楼',
    dataIndex: 'dormitoryNames',
    scopedSlots: { customRender: 'dormitoryNames' }
  },
  {
    key: 'roomNum',
    title: '分配房间数',
    dataIndex: 'roomNum',
    scopedSlots: { customRender: 'roomNum' }
  },
  {
    key: 'stayNum',
    title: '住宿人数',
    dataIndex: 'stayNum',
    scopedSlots: { customRender: 'stayNum' }
  },
  {
    key: 'externNum',
    title: '走读人数',
    dataIndex: 'externNum',
    scopedSlots: { customRender: 'externNum' }
  },
  // {
  //   key: 'leaveNum',
  //   title: '请假人数',
  //   dataIndex: 'leaveNum',
  //   scopedSlots: { customRender: 'leaveNum' }
  // },
  {
    key: 'number',
    title: '班级人数',
    dataIndex: 'number',
    scopedSlots: { customRender: 'number' }
  },
  {
    key: 'unAllocationNum',
    title: '分配状态',
    dataIndex: 'unAllocationNum',
    scopedSlots: { customRender: 'unAllocationNum' }
  },
  {
    key: 'action',
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    fixed: 'right',
    width: 100
  }
]);
const searchStatus = ref(0);
const checkOut = reactive({
  title: '温馨提示',
  visible: false,
  width: '328px',
  iconType: 'default',
  state: true
});
let text = ref('是否清空已选内容住宿信息？');
/* 查看详情事件
 * id=> classId 班级id
 */
const onClassDeta = data => {
  console.log(data, '查看详情事件');
  saveQuery();
  router.push({
    path: '/admin/classInfo/info',
    query: {
      id: data.classId,
      className: data.className,
      unAllocationNum: data.unAllocationNum
    }
  });
};
// 获取班级列表
const getClassInfo = num => {
  let where = {
    size: tableClassData.value.size,
    data: {}
  };

  where.current = num || tableClassData.value.current;
  // where.gradeId = formState.value.grade;
  // where.classId = formState.value.infoClass;

  where.data.allocationStatus = formState.value.allocationStatus;
  // console.log('走这里。。。。。。。。。。。。。', formState.value.grade);
  let gradeAndClass = filterChangeRef.value.disposeChangeData();
  where.data.classIdCondition = gradeAndClass;
  if (localStorage.dormitoryClassInfoQuery) {
    let data = JSON.parse(localStorage.dormitoryClassInfoQuery);
    where.size = data.size;
    where.current = data.current;
    where.data.allocationStatus = data.allocationStatus;
    formState.value.allocationStatus = data.allocationStatus;
    where.data.classIdCondition = data.classIdCondition;
    filterChangeRef.value.gradeAndClass = data.gradeAndClass;
    filterChangeRef.value.sectionList = data.sectionList;
    filterChangeRef.value.gradeAndClassText = data.gradeAndClassText;
    localStorage.removeItem('dormitoryClassInfoQuery');
  }
  // console.log(where, 'where');
  getClass(where)
    .then(res => {
      loading.value = false;
      if (res.data.code === 200) {
        tableClassData.value = res.data.data;
      }
    })
    .catch(() => {
      loading.value = false;
    });
};
function changClass() {
  console.log('选择班级回调', formState.value.infoClass);
  // query('hand');
}
// 查询
function query(status) {
  loading.value = true;
  if (status === 'hand') {
    searchStatus.value = 1;
    getClassInfo(1);
  } else {
    getClassInfo();
  }
}
function saveQuery() {
  let json = {
    size: tableClassData.value.size, // 10
    current: tableClassData.value.current, // 1
    grade: formState.value.grade,
    infoClass: formState.value.infoClass,
    allocationStatus: formState.value.allocationStatus,
    classIdCondition: filterChangeRef.value.disposeChangeData(),
    gradeAndClass: filterChangeRef.value.gradeAndClass,
    sectionList: filterChangeRef.value.sectionList,
    gradeAndClassText: filterChangeRef.value.gradeAndClassText
  };
  localStorage.setItem('dormitoryClassInfoQuery', JSON.stringify(json));
}
// 重置
async function reset() {
  searchStatus.value = 0;
  // if (stateUser.value.identity !== 8 && schoolBaseId.value !== 1) {
  //   await classList({ gradeId: optionList.value.gradeList[0].gradeId }).then(res => {
  //     if (res.data.code === 200) {
  //       let arr = stateUser.value.classInfoList.filter(v => v.gradeId === formState.value.grade)[0]
  //         .classIdList;
  //       let list = [];
  //       res.data.data.forEach(v => {
  //         if (arr.indexOf(v.id) !== -1) list.push(v);
  //       });
  //       res.data.data = list;
  //       optionList.value.classList = res.data.data;
  //     }
  //   });
  // }
  formState.value.grade = null;
  formState.value.infoClass = null;
  formState.value.allocationStatus = undefined;
  tableClassData.value.size = 10;
  optionList.value.classList = [];
  filterChangeRef.value.gradeAndClass = [];
  getClassInfo();
}

// 表格多选选项
const selectedRowKeys = ref([]);
const selectedRows = ref([]);
// const hasSelected = ref(false);
// 表格多选回调
const onSelectChange = (rowKeys, rows) => {
  selectedRowKeys.value = rowKeys;
  rows.value = rows;
  selectedRows.value = rows;
};
// 指定每页条数
const pageSizeOptions = ref(['10', '20', '30', '40', '50', '100', '500', '1000']);
// 分页回调
const onChangePagination = checked => {
  console.log(`a-switch to ${checked}`);
  getClassInfo();
};
const btnType = ref(); // 0: 宿舍分配 1：退宿
const show = ref(true);
// 宿舍分配
const hasCheckOut = computed(() => selectedRowKeys.value.length > 0);
const hasSelected = computed(() => selectedRowKeys.value.length > 0);
// 宿舍分配事件
const onDormitoryAllocation = () => {
  if (selectedRows.value.length) {
    btnType.value = 0;
    console.log('进入宿舍分配判断');
    // let arrAllocation = [];
    // selectedRows.value.forEach(item => {
    //   arrAllocation.push(item.unAllocationNum);
    // });
    let num = selectedRows.value.length;
    let isNum = selectedRows.value.filter(v => v.unAllocationNum === 0).length;
    let unNum = selectedRows.value.filter(v => v.unAllocationNum > 0).length;
    let isEmpty = selectedRows.value.filter(
      v => v.unAllocationNum < 0 || !v.unAllocationNum
    ).length;

    if (isNum === num) {
      console.log('已分配');
      text.value = '所选项目包含已分配或未标记住宿的班级，无法进行分配。';
      checkOut.visible = true;
      checkOut.state = true;
      CheckOutType.value = 0;
      show.value = false;
    }
    if (unNum === num) {
      console.log('未分配');
      let arrClassId = [];
      selectedRows.value
        .filter(i => i.unAllocationNum > 0)
        .forEach(it => {
          arrClassId.push(it.classId);
        });
      router.push({
        path: '/admin/classInfo/distributionDeta',
        query: {
          id: JSON.stringify(arrClassId)
        }
      });
    }

    // if (isEmpty !== num) {
    //   text.value = '所选项目为未标记住宿的班级，无法进行分配。';
    //   checkOut.visible = true;
    //   checkOut.state = true;
    //   CheckOutType.value = 0;
    //   show.value = false;
    // }
    // selectedRows.value.forEach((item, index) => {
    //   if (!item.unAllocationNum) {
    //     text.value = '所选项目为未标记住宿的班级，无法进行分配。';
    //     checkOut.visible = true;
    //     checkOut.state = true;
    //     CheckOutType.value = 0;
    //     show.value = false;
    //     console.log('第几个有问题', index);
    //     return false;
    //   }
    // });
    console.log('----selectedRows.value', selectedRows.value);
    console.log('----unNum', unNum);
    console.log('----isEmpty', isEmpty);
    console.log('----num', num);
    if (isEmpty === num) {
      console.log('--');
      text.value = '所选项目为未标记住宿的班级，无法进行分配。';
      checkOut.visible = true;
      checkOut.state = true;
      CheckOutType.value = 0;
      show.value = false;
    }
    if (isNum && unNum && isEmpty) {
      console.log('已分配&&未分配&&--');
      text.value = '所选项目包含未标记住宿的班级，【确认】后将取消选中上述班级继续分配。';
      checkOut.visible = true;
      checkOut.state = true;
      CheckOutType.value = 1;
      show.value = false;
    }
    if (isNum && !unNum && isEmpty) {
      console.log('已分配&&--');
      text.value = '所选项目包含已分配或未标记住宿的班级，无法进行分配。';
      checkOut.visible = true;
      checkOut.state = true;
      CheckOutType.value = 0;
      show.value = false;
    }
    if (isNum && unNum && !isEmpty) {
      console.log('已分配&&未分配&&--');
      text.value = '所选项目包含未标记住宿的班级，【确认】后将取消选中上述班级继续分配。';
      checkOut.visible = true;
      checkOut.state = true;
      CheckOutType.value = 1;
      show.value = false;
    }
    if (!isNum && unNum && isEmpty) {
      console.log('未分配&&--');
      text.value = '所选项目包含未标记住宿的班级，【确认】后将取消选中上述班级继续分配。';
      checkOut.visible = true;
      checkOut.state = true;
      CheckOutType.value = 1;
      show.value = false;
    }
  }
};

const CheckOutType = ref();
const CheckOutArr = ref([]);
// 退宿
function onCheckOut() {
  console.log();
  if (selectedRowKeys.value.length) {
    btnType.value = 1;
    // CheckOutArr.value = [];
    // selectedRows.value.forEach(item => {
    //   CheckOutArr.value.push(item.unAllocationNum);
    // });
    console.log('sss', selectedRows.value);
    let num = selectedRows.value.length;
    // let isNum = selectedRows.value.filter(v => v.unAllocationNum === 0).length;
    // let unNum = selectedRows.value.filter(v => v.unAllocationNum > 0 || !v.unAllocationNum).length;
    let isEmpty = selectedRows.value.filter(
      v => v.unAllocationNum < 0 || !v.unAllocationNum
    ).length;

    console.log(num, 'num');
    // console.log(isNum, 'isNum');
    // console.log(unNum, 'unNum');
    console.log(isEmpty, 'isEmpty');
    // if (isNum === num) {
    //   console.log('已分配');
    //   text.value = '是否清空已选内容住宿信息？';
    //   CheckOutType.value = 1;
    //   show.value = true;
    // }
    // if (unNum === num) {
    //   console.log('未分配------------------------');
    //   text.value = '所选项目为未分配或未标记住宿的班级，无法进行退宿。';
    //   CheckOutType.value = 0;
    //   show.value = false;
    // }
    // if (isEmpty === num) {
    //   console.log('--');
    //   text.value = '所选项目为未分配或未标记住宿的班级，无法进行退宿。';
    //   CheckOutType.value = 0;
    //   show.value = false;
    // }
    // if (isNum && unNum && isEmpty) {
    //   console.log('已分配&&未分配&&--');
    //   text.value = '所选项目包含未分配或未标记住宿的班级，【确认】后将取消选中上述班级继续退宿。';
    //   CheckOutType.value = 1;
    //   show.value = false;
    // }
    // if (isNum && !unNum && isEmpty) {
    //   console.log('已分配&&--');
    //   text.value = '所选项目包含未分配或未标记住宿的班级，【确认】后将取消选中上述班级继续退宿。';
    //   CheckOutType.value = 1;
    //   show.value = false;
    // }
    // if (isNum && unNum && !isEmpty) {
    //   console.log('已分配&&未分配');
    //   text.value = '所选项目包含未分配或未标记住宿的班级，【确认】后将取消选中上述班级继续退宿。';
    //   CheckOutType.value = 1;
    //   show.value = false;
    // }
    // if (!isNum && unNum && isEmpty) {
    //   console.log('未分配&&--');
    //   text.value = '所选项目为未分配或未标记住宿的班级，无法进行退宿。';
    //   CheckOutType.value = 0;
    //   show.value = false;
    // }
    // ------------------------------------------------------------------------------------------------------------

    if (isEmpty > 0) {
      console.log('isEmpty', isEmpty);
      console.log('已分配&&未分配&&--------------------------------------------------------lorem');
      text.value = '所选项目包含未分配的班级，无法进行退宿。';
      CheckOutType.value = 0;
      show.value = false;
      // selectedRowKeys.value = [];
      // selectedRows.value = [];
    } else {
      text.value = '是否清空已选内容住宿信息？';
      CheckOutType.value = 1;
      show.value = true;
    }
    // ------------------------------------------------------------------------------------------------------------

    checkOut.visible = true;
    checkOut.state = true;
  } else {
    console.log('请选择');
  }
}
// 班级批量 退宿 弹框确定
const checkOuts = debounce(function () {
  console.log('btnType.value------------------', btnType.value);
  console.log('checkOut.state----------------------', checkOut.state);
  console.log('CheckOutType.value----------------------', CheckOutType.value);
  btnLoading.value = true;
  if (checkOut.state) {
    if (btnType.value === 1) {
      if (CheckOutType.value === 1) {
        console.log('-2----------------------------2-');
        let arr = [];
        // selectedRows.value
        //   .filter(i => i.unAllocationNum === 0)
        //   .forEach(it => {
        //     arr.push(it.classId);
        //   });
        selectedRows.value.forEach(it => {
          arr.push(it.classId);
        });
        console.log('-1----------------------------1-');
        batchCheckout(arr).then(res => {
          console.log('-0----------------------------0-');
          if (res.data.code === 200) {
            message.success(res.data.msg);
            checkOut.visible = false;
            selectedRowKeys.value = [];
            selectedRows.value = [];
            getClassInfo();
            btnLoading.value = false;
          } else {
            text.value = res.data.msg;
            checkOut.state = false;
            show.value = false;
            btnLoading.value = false;
          }
        });
      } else {
        btnLoading.value = false;
        checkOut.visible = false;
      }
    } else {
      //
      if (CheckOutType.value === 1) {
        let arrClassId = [];
        selectedRows.value
          .filter(i => i.unAllocationNum > 0)
          .forEach(it => {
            arrClassId.push(it.classId);
          });
        btnLoading.value = false;
        router.push({
          path: '/admin/classInfo/distributionDeta',
          query: {
            id: JSON.stringify(arrClassId)
          }
        });
      } else {
        btnLoading.value = false;
        checkOut.visible = false;
      }
    }
  } else {
    btnLoading.value = false;
    checkOut.visible = false;
  }
}, 500);
// 退宿弹窗取消
const handleCancel = () => {
  checkOut.visible = false;
  btnLoading.value = false;
};
const btnLoading = ref(false);
// label样式
const labelCol = reactive({
  xs: { span: 8 },
  xl: { span: 8 },
  xxl: { span: 6 }
});
const wrapperCol = reactive({
  xs: { span: 24 },
  xl: { span: 24 },
  xxl: { span: 24 }
});
const filterChangeRef = ref(null);
</script>
<style lang="less" scoped>
.top,
.below {
  width: 100%;
  padding: 24px;
  background: #ffffff;
  border-radius: 4px;
}
.below {
  min-height: 805px;
  .search {
    display: flex;
    justify-content: space-between;
    .search-btn-left {
      width: 40%;
      display: flex;
      justify-content: flex-start;
      a-button {
        margin-left: 16px;
      }
    }
    .search-btn-right {
      width: 40%;
      display: flex;
      justify-content: flex-end;
    }
  }
  /deep/.micro-dormitory-empty-normal .micro-dormitory-empty-image {
    height: 100px;
  }
  /deep/.micro-dormitory-empty-img-simple {
    width: 100px;
    height: 80px;
  }
}
.top {
  margin-bottom: 24px;
  .search {
    display: flex;
    justify-content: flex-end;
  }
}
.pagination {
  align-items: center;
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}
.checkOutStyle {
  width: 280px;
  // height: 48px;
  background: #f8f8f8;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 14px;
  img {
    margin-right: 8px;
  }
}
.checkOut-notes {
  padding: 14px;
  font-size: 12px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  color: #999999;
}
.campus {
  width: 64px;
  height: 24px;
  font-size: 16px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: LEFT;
  color: #222222;
  line-height: 24px;
  margin-bottom: 16px;
}
.content {
  display: flex;
  justify-content: space-between;
  .option {
    width: 208px;
    border: 1px solid #e1dddd;
    border-radius: 4px;
  }
  .details {
    width: 609px;
    border: 1px solid #e1dddd;
    border-radius: 4px;
    .info {
      height: 46px;
      font-size: 16px;
      line-height: 46px;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      color: #222222;
      border-bottom: 1px solid #e1dddd;
      padding-left: 16px;
    }
    .info-content {
      height: 32px;
      display: flex;
      align-items: center;
      padding: 24px 24px;
    }
  }
}
.micro-dormitoryt-form-item {
  margin-bottom: 0 !important;
}
// .micro-dormitory-radio-wrapper {
//   display: flex !important;
//   height: 30px !important;
//   line-height: 0 !important;
//   align-items: center !important;
// }
/deep/.micro-dormitory-tabs-nav {
  padding: 0 10px !important;
}
.micro-dormitory-tabs-tabpane {
  margin-left: 10px !important;
}
/deep/.micro-dormitory-select-arrow {
  top: 40%;
}
</style>
